<template>
  <div class="login-container">
    <a-alert
      v-if="nodeEnv !== 'development'"
      title="beautiful boys and girls欢迎加入vue-admin-beautifulQQ群：972435319"
      type="success"
      :closable="false"
      style="position: fixed"
    ></a-alert>
    <a-row>
      <a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
        <div style="color: transparent">占位符</div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <a-form
          ref="form"
          :model="form"
          :rules="rules"
          class="login-form"
          label-position="left"
        >
          <div class="title">hello !</div>
          <div class="title-tips">欢迎来到{{ title }}！</div>
          <a-form-item style="margin-top: 40px" prop="username">
            <span class="svg-container svg-container-admin">
              <vab-icon :icon="['fas', 'user']" />
            </span>
            <a-input
              v-model.trim="form.username"
              v-focus
              placeholder="请输入用户名"
              tabindex="1"
              type="text"
            />
          </a-form-item>
          <a-form-item prop="password">
            <span class="svg-container">
              <vab-icon :icon="['fas', 'lock']" />
            </span>
            <a-input
              :key="passwordType"
              ref="password"
              v-model.trim="form.password"
              :type="passwordType"
              tabindex="2"
              placeholder="请输入密码"
              @keyup.enter="handleLogin"
            />
            <span
              v-if="passwordType === 'password'"
              class="show-password"
              @click="handlePassword"
            >
              <vab-icon :icon="['fas', 'eye-slash']"></vab-icon>
            </span>
            <span v-else class="show-password" @click="handlePassword">
              <vab-icon :icon="['fas', 'eye']"></vab-icon>
            </span>
          </a-form-item>
          <a-button
            :loading="loading"
            class="login-btn"
            type="primary"
            @click="handleLogin"
          >
            登录
          </a-button>
          <router-link to="/register">
            <div style="margin-top: 20px">注册</div>
          </router-link>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { isPassword } from "@/utils/validate";

export default {
  name: "Login",
  directives: {
    focus: {
      // inserted(el) {
      //   el.querySelector("input").focus();
      // },
    },
  },
  data() {
    const validateusername = (rule, value, callback) => {
      if ("" == value) {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback();
      }
    };
    return {
      nodeEnv: process.env.NODE_ENV,
      title: this.$baseTitle,
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateusername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    // $route: {
    //   handler(route) {
    //     this.redirect = (route.query && route.query.redirect) || "/";
    //   },
    //   immediate: true,
    // },
  },
  created() {
    document.body.style.overflow = "hidden";
  },
  // beforeDestroy() {
  //   document.body.style.overflow = "auto";
  // },
  mounted() {
    this.form.username = "admin";
    this.form.password = "123456";
  },
  methods: {
    handlePassword() {
      this.passwordType === "password"
        ? (this.passwordType = "")
        : (this.passwordType = "password");
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          // this.$store
          //   .dispatch("user/login", this.form)
          //   .then(() => {
          //     const routerPath =
          //       this.redirect === "/404" || this.redirect === "/401"
          //         ? "/"
          //         : this.redirect;
          //     this.$router.push(routerPath).catch((err) => {
          //       console.log(err);
          //     });
          //     this.loading = false;
          //   })
          //   .catch(() => {
          //     this.loading = false;
          //   });
        } else {
          return false;
        }
      });
      /* setTimeout(() => {
          window.open('https://github.com/chuzhixin/vue-admin-beautiful')
        }, 100000) */
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  background: url("~@/assets/login_images/background.jpg") center center fixed
    no-repeat;
  background-size: cover;
}
.title {
  font-size: 54px;
  font-weight: 500;
  color: rgba(14, 18, 26, 1);
}

.title-tips {
  margin-top: 29px;
  font-size: 26px;
  font-weight: 400;
  color: rgba(14, 18, 26, 1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-btn {
  display: inherit;
  width: 220px;
  height: 60px;
  margin-top: 5px;
  border: 0;
}

.login-form {
  position: relative;
  max-width: 100%;
  margin: calc((100vh - 425px) / 2) 10% 10%;
  overflow: hidden;
}
.forget-password {
  width: 100%;
  margin-top: 40px;
  text-align: left;
}
.forget-pass {
  width: 129px;
  height: 19px;
  font-size: 20px;
  font-weight: 400;
  color: rgba(92, 102, 240, 1);
}

.tips {
  margin-bottom: 10px;
  font-size: 13px;
  color: #f45;
}

.title-container {
  position: relative;

  .title {
    margin: 0 auto 40px auto;
    font-size: 34px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.svg-container {
  position: absolute;
  top: 14px;
  left: 15px;
  z-index: 1;
  font-size: 16px;
  color: #d7dee3;
  cursor: pointer;
  user-select: none;
}

.show-password {
  position: absolute;
  top: 14px;
  right: 25px;
  font-size: 16px;
  color: #d7dee3;
  cursor: pointer;
  user-select: none;
}

.el-input {
  box-sizing: border-box;

  input {
    height: 58px;
    padding-left: 45px;
    font-size: 13px;
    line-height: 58px;
    color: #333;
    background: #f6f4fc;
    border: 0;
    caret-color: #f45;
  }
}
</style>
